<template lang="pug">
div
  app-header(fixed,title="用户注册",back,v-if="!$helper.isWechat")
  div.form
    p.lab &nbsp; 请输入注册信息：
    mt-field(v-model="username",label="用户名",placeholder="请输入",type="text")
    mt-field(v-model="password",label="密码",placeholder="请输入",type="password")
    mt-field(v-model="repassword",label="确认密码",placeholder="请输入",type="password")
    mt-field(v-model="phone",label="手机号",placeholder="请输入",type="text")
    mt-field(v-model="fullname",label="真实姓名",placeholder="请输入",type="text")
  p
    mt-button(size="small",type="danger",@click="submitHandler") 注册
    a(href="javascript:void(0)",@click="loginHandler") 已有账号？
</template>

<script>
import { Toast, Radio, Button, MessageBox, Field } from 'mint-ui'
import Header from 'components/Header'
import { mapActions } from 'vuex'

export default {
  components: {
    'mt-button': Button,
    'mt-radio': Radio,
    'mt-field': Field,
    'app-header': Header
  },
  data () {
    return {
      role: 1,
      username: null,
      password: null,
      repassword: null,
      phone: null,
      fullname: null
    }
  },
  methods: {
    ...mapActions({
      registry: 'registry'
    }),
    async submitHandler () {
      if (!this.role) {
        return Toast('请选择角色')
      }
      if (!this.username) {
        return Toast('请输入用户名')
      }
      if (!this.password) {
        return Toast('请输入密码')
      }
      if (this.password !== this.repassword) {
        return Toast('两次密码不一致')
      }
      if (!this.phone) {
        return Toast('请输入手机号')
      }
      if (!this.fullname) {
        return Toast('请输入姓名')
      }
      let result = await this.registry({
        role: this.role,
        username: this.username,
        password: this.password,
        phone: this.phone,
        fullname: this.fullname
      })
      if (result.code) {
        if (!result.data) {
          Toast(result.message)
        } else {
          for (let lab in result.data) {
            Toast(result.data[lab][0])
            break
          }
        }
      } else {
        MessageBox.alert(result.message).then(action => {
          this.$router.push({name: 'user:index'})
        })
      }
    },
    loginHandler () {
      this.$router.push({name: 'login'})
    }
  }
}
</script>
<style lang="stylus" scoped>
p.lab
  font-size: 0.35rem
  margin: .5rem /* 8/16 */
  display: block
  color: #888
  text-align: left
  line-height: 0.2rem
p
  text-align: center
  line-height: 2.125rem /* 50/16 */
  button
    outline: none
    cursor: pointer
    width: 89%
  a
    font-size: 0.35rem
    float: right
    position: absolute
    margin-left: -2.5rem
    margin-top: 0.9rem
    text-decoration: none
</style>
